@charset "utf-8";

html,body { width: 100%; height: 100%; overflow: hidden; position: relative; background:#000; }
body { max-width: 980px; margin: auto; position: relative; font-size: 10px; }
/*body,canvas,div { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; -khtml-user-select: none; -webkit-tap-highlight-color: rgba(0,0,0,0); font-family: Tahoma;}
*/
.content { width: 100%; height: 100%; position: relative; }
canvas { margin: auto; display: block; }

.ruleBox { width: 92%; height: auto; position: absolute; top: 0; z-index: 1; text-align: right;}
.ruleBox button { padding: 5% 0%; }
.ruleBox button img { width: calc( 100% + 15%);}

.bthBox { width: 100%; height: auto; position: absolute; bottom: 12%; z-index: 1; text-align: center; }
.bthBox button { display: block; width: 100%; margin: auto; text-align: center; }
.bthBox button img { width: calc( 100% - 45% ); }

/** music **/
.music_glo { width: auto; height: auto; display: none; visibility: visible; position: relative; }
/**form css**/
.formWrap {
  width: 70%;
  height: auto;
  margin: auto;
  overflow: hidden;
  position: relative; }
  .formWrap .formNode {
    border: 2px solid rgba(255, 255, 255, 0.9);
    padding: 1%;
    line-height: 0rem;
    margin: 3% auto; }
    .formWrap .formNode span {
      font-size: 400%;
      line-height: 210%;
      display: inline-block;
      margin: 0;
      padding: 0 0 0 3%; }
    .formWrap .formNode span:first-child { width: 28%; }
     .formWrap .formNode span:last-child { width: 65%; }

  .formWrap .nodes {
    background-color: rgba(255, 255, 255, 0.9);
    padding: .1%; }
    .formWrap .nodes input[type="text"] {
      font-size: 100%;
      background-color: transparent !important;
      border: none; }
    .formWrap .nodes input[type="radio"] {
      width: 35px;
      height: 35px;
      margin-right: .02rem;
      position: relative;
      top: .05rem; }
    .formWrap .nodes input[type="radio"]:last-child {
      margin-left: .3rem; }
    .formWrap .nodes select {
      width: auto;
      height: auto;
      padding: 0% .8% 0% .8%;
      font-size: 100%;
       }
      .formWrap .nodes select option {
        display: block;
        direction: rtl; }

#error { 
  background-color: transparent;
}
  #error .node-error {
    position: relative;
    color: #fff;
    text-align: center; }
    #error .node-error span {
      background-color: rgba(0, 0, 0, 0.8);
      width: 100%;
      height: auto;
      text-align: center;
      padding: 3% 5%;
      font-size: 50px;
      line-height: 300%;
      border-radius: 10px 10px; }

/* txt box */
.fontTxt {width: 100%; height: auto; position: absolute; top: 55%;  right: 0; display: block; opacity: 1; visibility: visible; z-index: 111;}
.fontTxt p { font-size: 500%; width: 70%; margin: auto; text-align: center; }
.fontTxt p:first-child { color: #f86401;  }
.fontTxt p:last-child { color: #13ae67; }
/* button box */
#UpBox { width: 100%; height: 100%; position: absolute; top: 81%; text-align: center; right: 0; display: block; opacity: 1; visibility: visible; z-index: 11;}
#UpBox button { width: auto; height: auto; outline: none; border: 0; font-size: 500%; display: inline-block; background-color: rgba( 255, 255, 255, .8); padding: 1% 6%; border-radius: 20px 20px;}
#UpBox button:first-child { margin-right: 10%; background-color: #13ae67; color: #fff;}
#UpBox button:last-child { background-color: #f86401; color: #fff; }


/* pop window */
.Popwindow, #rule{
	width: 100%;
	height: 100%;
	background: url(../img/bgphoto.jpg)no-repeat;
	background-size: 100% 100%;
	position: absolute;
	top: 0;
	right: 0;
	visibility: visible;
	opacity: 1;
	z-index: 111;
	display: none;
}
.Popwindow .Popcontent{ width: 100%; height: auto; overflow: hidden;  text-align: center;}
.Popwindow .Popcontent img { width: calc( 100% - 15% ); }
.Popwindow .Poptitle { width: 100%; height: auto; text-align: right; }
.Popwindow .Poptitle img { padding: 5% 5% 0% 5%; z-index: 111;}

/** POP 活动规则+奖品清单 **/
.Popwindow .tabUl { width: 90%; height: auto; margin: auto; font-size: 500%; color: #fff;}
.Popwindow .tabUl li { display: inline-block; background-color: #13ae67; padding: 1% 5%; border-top-left-radius: 10px; border-top-right-radius: 10px; }
.Popwindow .tabUl li.istouch { background-color: red; }
.Popwindow .tabContont { width: 90%; height: auto; border: 1px solid #13ae67; border-radius: 10px 10px; margin: auto; color: #fff;}
.Popwindow .tabContont p { text-align: justify; padding: .7% 5%; font-size: 390%;}
.tabContont p:nth-child(1),.tabContont p:nth-child(3){ color: #13ae67; }
.tabContont button { width: auto; height: auto; font-size: 500%; display: block; color: #fff; margin: 20% auto; background-color: #13ae67; padding: 5%; border-radius: 10px 10px; }
.tabContont button:last-child { background-color: #f86401; }
/* POP 查看分数*/
.fsBox { width: auto; height: auto; overflow: hidden; }
.red { width: 90%; height: auto; margin: auto;}
/*.red ul { text-align: center; }*/
.red ul li,.blue ul li { display: inline-block; font-size: 0px; width: 8%; top: 0%; margin: 0 0.6%; padding: 10% 0% 10% 0%; }
.red ul li:nth-child(1), .red ul li:nth-child(2), .red ul li:nth-child(3), .blue ul li:nth-child(1), .blue ul li:nth-child(2), .blue ul li:nth-child(3) { opacity: .2; }
.red ul li:nth-child(4), .red ul li:nth-child(5), .red ul li:nth-child(6), .red ul li:nth-child(7), .blue ul li:nth-child(4), .blue ul li:nth-child(5), .blue ul li:nth-child(6), .blue ul li:nth-child(7) { opacity: .8; }
.red ul li { border: 1px solid #41bd43; font-size: 100%; color: transparent; }
.red ul li.green { background-color: #41bd43; }
.red ul li.red { background-color: #f86401; }
.blue ul li { border: 1px solid #f86401; font-size: 100%; color: transparent; }
.getLy { width: 100%; height: auto; text-align: center; }
.getLy button { background-color: #f86401; display: block; margin: 8% auto; padding: 2% 4%; font-size: 500%; border-radius: 10px 10px; color: #fff; }

/*loading*/
#loading{width: 100%; height: 100%;}
#loading{position: absolute; top:0;left: 0; background-color: #fff; z-index: 111;}
.loadhid{display: none}
.loading-tx{width: 40%; margin: 0 auto; padding-top: 10%; text-align: center;}
.load-area{ width: 30%; height: 46%;margin: 0 auto;position: relative;}
.la{display: block; width: 100%; height:2px;border-bottom:2px solid #474641; position: absolute; bottom: 1%; left: 0;}
.a1{-webkit-transform: rotate(-60deg);-webkit-transform-origin:0 100%;}
.a2{-webkit-transform: rotate(60deg);-webkit-transform-origin:100% 0;}
#LoadNUM{ position: absolute; bottom: 8%; left:0;display: block;width: 100%; text-align: center;font-size: 2.7rem}
.lights{position: absolute; bottom: 0; left: 0; width: 2rem; height: 2rem; border-radius: 50px; background-color: #e2e2e2; opacity: 0.8;-webkit-animation:lights 2s linear infinite;}
@-webkit-keyframes lights{
    0% {left: 44%; bottom: 32%}
    33%{left: 94%; bottom: -1%}
    66%{left: -6%; bottom: -1%}
    100%{left: 44%; bottom: 31%}
}
/*loading*/

/* Tabox */
.TaBox { width: 100%; height: 100%; position: absolute; top: 0; right: 0; z-index: 111; }
.TaLeft { width: 50%; height: auto; position: absolute; top: 56%; left: 0; }
.TaLeft button img { position: absolute; left: calc( 100% - 83% ); display: block; opacity: .5; width: calc( 100% - 35% ); }
.TaRight { width: 50%; height: auto; position: absolute; top: 56%; right: 0; }
.TaRight button img { position: absolute; left: calc( 100% - 90% );  width: calc( 100% - 35% ); opacity: .5; }
.txtbutton:before { width: 150px; height: 150px; border-radius: 100%; transition: .2s ease-in ; content: "学霸"; position: absolute; font-size: 500%; line-height: 280%; margin-top: 25%; left: 35%; color: red; opacity: 1; transform: rotate(-20deg); visibility: visible; z-index: 112; border: 8px solid rgba( 0, 0, 0, .3); background-color: rgba( 255, 255, 255, .7); }
.txtbutton2:before { width: 150px; height: 150px; border-radius: 100%; transition: .2s ease-in ; content: "学渣"; position: absolute; font-size: 500%; line-height: 280%; margin-top: 25%; left: 26%; color: red; opacity: 1; transform: rotate(20deg); visibility: visible; z-index: 112; border: 8px solid rgba( 0, 0, 0, .3); background-color: rgba( 255, 255, 255, .7); }
button.txtbutton img { opacity: 1; transform: scale(1.1); transition: .2s ease-in ; }
button.txtbutton2 img { opacity: 1; transform: scale(1.1); transition: .2s ease-in ; }
.btonBox { width: 100%; height: auto; position: absolute; right: 0; bottom: 7%; text-align: center; z-index: 111;}

/** page6 and page 7 **/
section {  }
.ActWrap { background-color: #000; }

.ActLoadBox {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  visibility: visible;
  opacity: 1;
  background: url(../img/bgphoto.jpg) no-repeat center center;
  background-size: 100% 100%; }

.loadBox1 {
  width: 100%;
  height: 15%;
  position: relative;
  visibility: visible; }
.loadBox1 .logo {
    width: 65%;
    float: left; }
.loadBox1 .logo img {
      width: auto;
      height: auto;
      margin: 5%; }
.loadBox1 .button {
    width: 35%;
    float: right;
    text-align: right; }
.loadBox1 .button button {
      padding: 8% 8%;
      outline: none; }

.loadBox2 {
  width: 100%;
  height: 60%;
  position: relative;
  visibility: visible; }
.loadBox2 img {
    display: block;
    border: none;
    outline: none;
    margin: 0 auto;
    width: auto;
}
.loadBox2 .beginBox {
    padding: .3rem 0rem 0rem 0; }
.loadBox2 .beginBox a {
      width: 4rem;
      display: inline-block; }
.loadBox2 .beginBox a img {
        width: 4rem; }

.loadBox3 {
  width: 100%;
  height: 25%;
  position: relative;
  visibility: visible;
  text-align: center;
  z-index: 1; }

  /**games**/
.clear {
  clear: both; }

.content2 {
  padding: 30px;
  width: 900px;
  margin: 0 auto; }

.slotMachineButton {
  width: 130px;
  height: 130px;
  overflow: hidden;
  display: inline-block;
  text-align: center; }

.slotMachineButton {
  -moz-box-shadow: inset 0px 1px 0px 0px #fce2c1;
  -webkit-box-shadow: inset 0px 1px 0px 0px #fce2c1;
  box-shadow: inset 0px 1px 0px 0px #fce2c1;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffc477), color-stop(1, #fb9e25));
  background: -moz-linear-gradient(center top, #ffc477 5%, #fb9e25 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffc477', endColorstr='#fb9e25');
  background-color: #ffc477;
  border-radius: 75px;
  text-indent: 0px;
  border: 6px solid #eeb44f;
  display: inline-block;
  color: #ffffff;
  font: 700 25px/130px "Microsoft Yahei";
  height: 130px;
  width: 130px;
  text-decoration: none;
  text-align: center;
  text-shadow: 1px 1px 0px #cc9f52;
  margin-left: 50px;
  cursor: pointer; }

.slotMachineButton:hover {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #fb9e25), color-stop(1, #ffc477));
  background: -moz-linear-gradient(center top, #fb9e25 5%, #ffc477 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fb9e25', endColorstr='#ffc477');
  background-color: #fb9e25; }

.slotMachineButton:active {
  position: relative;
  top: 1px; }

.slotMachine {
  width: 130px;
  height: 130px;
  overflow: hidden;
  display: inline-block;
  font-size: 0px;
  text-align: center;
  border: 2px solid transparent;
  border-radius: .1rem;
  background-color: transparent; }

.slotMachine .slot {
  /* width: 130px; height: 130px;*/
  background-color: transparent;
  border: none;
  font-size: 60px; }

.slotMachine .slot:last-child {
  /*margin-top: 50px;*/
  position: relative; }

.slotMachine .slot:last-child font {
  position: relative;
  /*top: -50px;*/
}

.slotMachineGradient {
  background-color: transparent;
  border: none; }

@-webkit-keyframes flash {
  0% {
    opacity: 1; }
  50% {
    opacity: 1;
    -webkit-transform: translateX(330px);
    transform: translateX(330px); }
  100% {
    opacity: 1; } }

@keyframes flash {
  0% {
    opacity: 1; }
  50% {
    opacity: 1;
    -webkit-transform: translateX(330px);
    transform: translateX(330px); }
  100% {
    opacity: 1; } }

/**NUMBER css**/
.zh { color: #000; line-height: 200%; }

.fh { color: #ff0000; line-height: 200%; }

.number { font-size: 100%; color: #000; line-height: 230%; }
button, img { background-color: transparent; border: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); outline: none; }
button, img:active { border: none; }

.lg { animation: lg 1s linear; -webkit-animation: lg .5s linear; -moz-animation: lg .5s linear; }
@-webkit-keyframes lg {
  0% {
    -webkit-transform: translateY(23px) translateX(3px) rotateX(-30deg) perspective(0px) rotateZ(2deg);
    transform: translateY(23px) translateX(3px) rotateX(-30deg) perspective(0px) rotateZ(2deg);
    background-color: transparent;
    border: none; }
  50% {
    -webkit-transform: translateY(43px) translateX(7px) rotateX(-50deg) rotateZ(4deg) perspective(0px);
    transform: translateY(43px) translateX(7px) rotateX(-50deg) rotateZ(4deg) perspective(0px);
    background-color: transparent;
    border: none; }
  100% {
    -webkit-transform: translateY(0px) rotateX(0deg);
    transform: translateY(0px) rotateX(0deg);
    background-color: transparent;
    border: none; } }

@keyframes lg {
  0% {
    -webkit-transform: translateY(23px) translateX(3px) rotateX(-30deg) perspective(0px) rotateZ(2deg);
    transform: translateY(23px) translateX(3px) rotateX(-30deg) perspective(0px) rotateZ(2deg);
    background-color: transparent;
    border: none; }
  50% {
    -webkit-transform: translateY(43px) translateX(7px) rotateX(-50deg) rotateZ(4deg) perspective(0px);
    transform: translateY(43px) translateX(7px) rotateX(-50deg) rotateZ(4deg) perspective(0px);
    background-color: transparent;
    border: none; }
  100% {
    -webkit-transform: translateY(0px) rotateX(0deg);
    transform: translateY(0px) rotateX(0deg);
    background-color: transparent;
    border: none; } }
@keyframes start {
  0%, 30% {
    opacity: 0;
    -webkit-transform: translate(0, 10px);
    transform: translate(0, 10px); }
  60% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0); }
  100% {
    opacity: 0;
    -webkit-transform: translate(0, -8px);
    transform: translate(0, -8px); } 
}
